<template>
<div class="wrapper">
	<swiper :options="swiperOption">
	    <!-- slides -->
	    <!-- <swiper-slide><img class="swiper-img" src="http://img1.qunarzz.com/piao/fusion/1805/77/f63bd04dd5319602.jpg_750x200_6ba8e0ca.jpg" alt=""></swiper-slide>
	    <swiper-slide><img class="swiper-img" src="http://img1.qunarzz.com/piao/fusion/1805/e5/59fad13a64807d02.jpg_750x200_713ae984.jpg" alt=""></swiper-slide>
	    <swiper-slide><img class="swiper-img" src="http://img1.qunarzz.com/piao/fusion/1805/3b/ef86879aa50e3002.jpg_750x200_2a108508.jpg" alt=""></swiper-slide> -->
	    <!-- <swiper-slide>I'm Slide 4</swiper-slide>
	    <swiper-slide>I'm Slide 5</swiper-slide>
	    <swiper-slide>I'm Slide 6</swiper-slide>
	    <swiper-slide>I'm Slide 7</swiper-slide> -->
	    <swiper-slide v-for='item of swiperList' :key='item.id'>
	    	<img :src="item.imgUrl" alt="" class="swiper-img">
	    </swiper-slide>	
	    <!-- Optional controls -->
	    <div class="swiper-pagination"  slot="pagination"></div>
	    <!-- <div class="swiper-button-prev" slot="button-prev"></div>
	    <div class="swiper-button-next" slot="button-next"></div> -->
	    <!-- <div class="swiper-scrollbar"   slot="scrollbar"></div> -->
  </swiper>
</div>
</template>
<script>
export default {
  name: "HomeSwiper",
  data () {
  	return {
  		swiperOption: {
  			pagination: '.swiper-pagination',
  			loop:true
  		},
 		swiperList: [{
 			id:'0001',
 			imgUrl:'http://img1.qunarzz.com/piao/fusion/1805/77/f63bd04dd5319602.jpg_750x200_6ba8e0ca.jpg'
 		},{
 			id:'0002',
 			imgUrl:'http://img1.qunarzz.com/piao/fusion/1805/e5/59fad13a64807d02.jpg_750x200_713ae984.jpg'
 		},{
 			id:'0003',
 			imgUrl:'http://img1.qunarzz.com/piao/fusion/1805/3b/ef86879aa50e3002.jpg_750x200_2a108508.jpg'
 		}]
  	}
  }
}	
</script>
<style scoped lang="stylus">
	.wrapper
		overflow: hidden
		width: 100%
		height: 0
		padding-bottom: 26%
		background: #eee
		.swiper-img
			width: 100%
	.wrapper>>>.swiper-pagination-bullet-active
			background: #fff !important	
</style>